<div class="hero common-hero">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="hero-ct">
          <h1>电影列表</h1>
          <ul class="breadcumb">
            <li class="active"><a href="/">首页</a></li>
            <li><span class="ion-ios-arrow-right"></span> 电影列表</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="page-single">
  <div class="container">
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="topbar-filter fw">
          <p>共找到 <span>{{pageInfo.totalElements}} 条记录</span></p>
          <label>电影类型:</label>
          <select (change)="changeMovieListByType($event.target.value)">
            <option [value]="type['value']" *ngFor="let type of types">{{type['name']}}</option>
          </select>
        </div>

        <div class="flex-wrap-movielist mv-grid-fw">
          <div class="movie-item-style-2 movie-item-style-1" *ngFor="let movie of pageInfo.data">
            <img [src]="movie['cover']" alt="" style="height: 200px;width: 145px;">
            <div class="hvr-inner">
              <a [routerLink]="['/movie/detail',movie.id]"> 详情 <i class="ion-android-arrow-dropright"></i> </a>
            </div>
            <div class="mv-item-infor">
              <h6><a href="#">{{movie['name']}}</a></h6>
              <p class="rate"><i class="ion-android-star"></i><span>{{movie['rate']}}</span> /10</p>
            </div>
          </div>
        </div>
        <div class="topbar-filter">
          <label>每页要查询的记录:</label>
          <select>
            <option value="saab">每页12条记录</option>
          </select>

          <div class="pagination2">
            <span>页码 {{pageInfo.currentPage}} / {{pageInfo.totalPages}} :</span>
            <a *ngFor="let i of pageInfo.pagesArr" (click)="changePage(i)" style="cursor: pointer">{{i}}</a>
            <a href="#"><i class="ion-arrow-right-b"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
